<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- <script src="js/jQuery.min.js"></script>
    <script src="js/index.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        outline: none !important;
    }

    html {
        height: 100%;
    }

    body {
        height: 100%;
        background-image: -webkit-linear-gradient(left, #fbc2eb, #a6c1ee);
    }

    .header {
        width: 500px;
        height: 42px;
        margin: 10px auto;
        text-align: center;
    }

    .header input {
        width: 300px;
        height: 40px;
        border: 0;
        border-radius: 10px;
        padding: 0 10px;
    }

    .header button {
        height: 40px;
        margin-left: 10px;
        border: 0;
    }

    .weiwancheng,
    .yiwancheng {
        width: 600px;
        margin: 10px auto;
    }

    .weiwancheng ul,
    .yiwancheng ul {
        width: 100%;
    }

    .weiwancheng ul li,
    .yiwancheng ul li {
        display: flex;
        align-items: center;
        list-style: none;
        line-height: 30px;
        width: 100%;
        margin-top: 10px;
        border: 0;
        border-radius: 10px;
        background-color: aqua;
    }

    .content {
        display: inline-block;
        width: 400px;
        word-wrap: break-word;
        margin: 0 !important;
        padding: 0 10px;
    }

    .weiwancheng ul li em,
    .yiwancheng ul li em {
        margin-left: 20px;
        cursor: pointer;
        height: 14px;
        width: 14px;
    }
</style>

<body>
    <div class="header">
        <input type="text">
        <button class="btn btn-success">添加备忘</button>
    </div>
    <div class="con">
        <div class="weiwancheng">
            <p>未完成</p>
            <ul>

            </ul>
        </div>

        <div class="yiwancheng">
            <p>已完成</p>
            <ul>

            </ul>
        </div>

    </div>
</body>
<script>
    $(function () {
        $(".btn").click(function () {
            if ($(".header input").val() != '') {
                var li = $("<li></li>");
                $(".weiwancheng ul").prepend(li);
                var p = $("<p></p>");
                p.addClass("content");
                li.append(p);
                p.text($(".header input").val());
                function getNow(s) {
                    return s < 10 ? '0' + s : s;
                }

                var myDate = new Date();

                var year = myDate.getFullYear();        //获取当前年
                var month = myDate.getMonth() + 1;   //获取当前月
                var date = myDate.getDate();            //获取当前日
                var h = myDate.getHours();              //获取当前小时数(0-23)
                var m = myDate.getMinutes();          //获取当前分钟数(0-59)
                var s = myDate.getSeconds();

                var now = year + '-' + getNow(month) + "-" + getNow(date) + " " + getNow(h) + ':' + getNow(m) + ":" + getNow(s);
                var span = $("<span></span>");
                li.append(span);
                span.text(now);
                var em = $("<em></em>");
                em.addClass("glyphicon glyphicon-ok");
                li.append(em);

                $(em).click(function () {
                    var li = $("<li></li>");
                    $(".yiwancheng ul").prepend(li);
                    var p = $("<p></p>");
                    p.addClass("content");
                    li.append(p);
                    p.text($(this).siblings("p").text());
                    function getNow(s) {
                        return s < 10 ? '0' + s : s;
                    }

                    var myDate = new Date();

                    var year = myDate.getFullYear();        //获取当前年
                    var month = myDate.getMonth() + 1;   //获取当前月
                    var date = myDate.getDate();            //获取当前日
                    var h = myDate.getHours();              //获取当前小时数(0-23)
                    var m = myDate.getMinutes();          //获取当前分钟数(0-59)
                    var s = myDate.getSeconds();

                    var now = year + '-' + getNow(month) + "-" + getNow(date) + " " + getNow(h) + ':' + getNow(m) + ":" + getNow(s);
                    var span = $("<span></span>");
                    li.append(span);
                    span.text(now);
                    var em = $("<em></em>");
                    em.addClass("glyphicon glyphicon-ok");
                    li.append(em);
                    $(this).parent().remove();
                    $(".yiwancheng ul li em").click(function () {
                        $(this).parent().remove();
                    });
                });

            } else {
                alert('备忘不能为空！');
            }
        });
    })

</script>

</html>